<template>
  <div>
    <div v-if="!isView">
      <el-upload
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :on-remove="handleRemoveUpload"
        :before-upload="beforeAvatarUpload"
        :on-error="handelError"
        :headers="{ Authorization: this.$store.getters.token }"
        :action="action"
        name="multipart"
        class="avatar-uploader"
      >
        <i v-if="!imageUrl" class="el-icon-plus avatar-uploader-icon" />
      </el-upload>

      <div v-if="imageUrl">
        <div
          class="player-olympic"
          :class="{ 'player-olympic-sm-screen': !fullScreen }"
          ref="playerTemp"
        ></div>
        <div @click="deleteVideo">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPlayAuth } from "@/api/system";
import { Loading } from "element-ui";
export default {
  model: {
    prop: "val",
    event: "cc"
  },
  props: {
    val: {
      type: String,
      default() {
        return "";
      }
    },
    isView: {
      type: Boolean,
      default: false
    },
    cateId: {
      type: String,
      default() {
        return "";
      }
    },
    linkUrl: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      imageUrl: "",
      action: "",
      fullScreen: false,
      playauth: "",
      isTack: true
    };
  },
  computed: {},
  watch: {
    val: {
      handler(val, oldVal) {
        // this.init(val);
      },
      immediate: true
    }
  },
  created() {
    this.action = `${process.env.BASE_API}/vod/video/upload?cateId=${this.cateId}`;
  },
  mounted() {
    this.init(this.val);
    setTimeout(() => {}, 100);
  },
  methods: {
    deleteVideo() {
      this.imageUrl = "";
      this.$emit("cc", this.imageUrl);
    },
    createDemoPlayer(source, cover) {
      if (document.getElementById("player-con") === null) {
        let playerDomWrap = this.$refs.playerTemp;
        let playerDom = document.createElement("div");
        playerDom.setAttribute("id", "player-con");
        playerDomWrap.appendChild(playerDom);
      }
      let props = {
        id: "player-con",
        // source: source,
        vid: source, // 必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
        playauth: this.playauth, // 必选参数。音视频播放凭证。
        width: "178px",
        height: "178px",
        autoplay: true,
        language: "zh-cn",
        cover: cover
      };
      this.player = new Aliplayer(props);
      this.player.on("requestFullScreen", this.fullScreenHandle);
      this.player.on("cancelFullScreen", this.cancelFullScreenHandel);
    },
    fullScreenHandle() {
      let title = "这是标题";
      this.player.getComponent("playerFullScreenTitle").fullScreenHandle(title);
      this.fullScreen = true;
    },
    cancelFullScreenHandel() {
      this.player
        .getComponent("playerFullScreenTitle")
        .cancelFullScreenHandle();
      this.fullScreen = false;
    },
    init() {
      if (this.val) {
        this.imageUrl = this.val;
        if (this.isTack && this.linkUrl) {
          this.createDemoPlayerUrl(this.linkUrl);
          // this.getPlayAuth(this.imageUrl);
        }
      }
    },
    // 获取authkey 并且渲染 播放器
    getPlayAuth(v) {
      console.log(v);
      getPlayAuth(v).then(result => {
        this.imageUrl = v;
        this.playauth = result.data.playAuth;
        this.$emit("cc", this.imageUrl);
        setTimeout(() => {
          this.createDemoPlayer(this.imageUrl);
        }, 500);
      });
    },
    handleAvatarSuccess(res, fileList) {
      const loading = Loading.service({});
      loading.close(); // 关闭加载前，记得重新定义实例
      console.log(res);
      this.isTack = false;
      this.createDemoPlayerUrl(res.data.playURL);
      this.imageUrl = res.data.videoId;
      this.$emit("cc", res.data.videoId);
      // this.getPlayAuth(res.data);

      // this.$emit('getPlayAuth', res.data)
      // if (res.code == 0) {
      //   this.imageUrl = res.data.filePath;

      //   this.$message.success("上传成功");
      // } else {
      //   this.$message.error("上传失败");
      // }
    },
    // 删除上传的文件
    handleRemoveUpload(file, fileList) {},
    handelError(err, file, fileList) {
      const loading = Loading.service({});
      loading.close(); // 关闭加载前，记得重新定义实例
      this.$message.error("上传失败");
    },
    beforeAvatarUpload(file) {
      const types = [
        "video/mp4",
        "video/wmv",
        "video/rmvb",
        "video/3gp",
        "video/mov",
        "video/m4v",
        "video/avi",
        "video/mkv",
        ,
        "video/flv",
        ,
        "video/vob",
        "video/avi"
      ];
      const isJPG = types.includes(file.type);
      const isLt20M = file.size / 1024 / 1024 < 100;

      if (!isJPG) {
        this.$message.error("只能上传视频");
        return false;
      }
      // if (!isLt20M) {
      //   this.$message.error('上传头像视频大小不能超过 20MB');
      //   return false
      // }
      console.log(file);
      Loading.service({
        fullscreen: true,
        text: "上传中...",
        background: "rgba(0,0,0,.3)"
      });
      return true;
    },
    createDemoPlayerUrl(source) {
      if (document.getElementById("player-con") === null) {
        let playerDomWrap = this.$refs.playerTemp;
        let playerDom = document.createElement("div");
        playerDom.setAttribute("id", "player-con");
        playerDomWrap.appendChild(playerDom);
      }

      let props = {
        id: "player-con",
        width: "178px",
        height: "178px",
        autoplay: true,
        language: "zh-cn",
        source: source,
        isLive: false
      };
      this.player = new Aliplayer(props);
      this.player.on("requestFullScreen", this.fullScreenHandle);
      this.player.on("cancelFullScreen", this.cancelFullScreenHandel);
    }
  }
};
</script>

<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  background: #fbfdff !important;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  background: #fbfdff !important;
}

.player-olympic {
  width: 178px;
  height: 178px;
  background: #fff;
  position: relative;
  background-color: #373d41;
  .prism-progress-cursor {
    background-position: center center;
  }
  .az-loading {
    line-height: 485px;
  }
  .prism-player .prism-big-play-btn {
    top: 50% !important;
    left: 50% !important;
    margin-top: -32px;
    margin-left: -32px;
  }
  .prism-player .prism-fullscreen-btn {
    width: 38px;
    height: 38px;
    margin-top: 7px !important;
    margin-right: 15px !important;
  }
  .prism-player .prism-volume {
    margin-right: 15px !important;
  }
  .prism-player .prism-cc-btn {
    margin-right: 25px !important;
  }
  .prism-player .prism-setting-btn {
    margin-right: 25px !important;
  }
  .prism-player .prism-volume-control {
    left: auto !important;
    right: 165px;
  }
  &.player-olympic-sm-screen {
    .prism-player .prism-volume-control {
      left: auto !important;
      right: 125px;
    }
    .prism-player .prism-fullscreen-btn {
      margin-top: 15px !important;
      width: 24px;
      height: 24px;
    }
    .prism-player .prism-thumbnail {
      border: none;
    }
    .prism-player .prism-play-btn {
      width: 28px;
      height: 28px;
    }
    .player-olympic-player-next {
      width: 24px;
      height: 28px;
    }
    .prism-volume {
      margin-top: 14px !important;
      margin-right: 12px !important;
    }
    .prism-player .prism-volume .volume-icon {
      width: 27px;
      height: 26px;
      background-repeat: no-repeat;
      .short-horizontal {
        width: 2px;
        height: 7px;
      }
      .long-horizontal {
        width: 2px;
        height: 13px;
      }
      &.mute {
        .short-horizontal {
          height: 13px;
          top: 7px;
        }
        .long-horizontal {
          top: 7px;
          height: 13px;
        }
      }
    }
    .prism-player .prism-cc-btn {
      height: 24px;
      width: 20px;
      margin-top: 14px !important;
      margin-right: 22px !important;
    }
    .prism-player .prism-setting-btn {
      width: 20px;
      height: 22px;
      margin-top: 15px !important;
      margin-right: 23px !important;
    }
    .prism-time-display {
      margin-top: 4px !important;
      margin-left: 20px !important;
    }
  }
}
</style>
